<template>
    <section>

        <!--领养订单列表-->
        <el-table :data="adoptOrders" v-loading="listLoading"   @selection-change="selsChange" style="width: 100%;">
            <el-table-column prop="pet.name" label="宠物">
            </el-table-column>
            <el-table-column prop="user.username" label="用户">
            </el-table-column>
            <el-table-column prop="price" label="金额">
            </el-table-column>
            <el-table-column prop="digest" label="摘要">
            </el-table-column>
            <el-table-column label="状态">
                <template scope="scope">
                    <span v-if="scope.row.state==1" style="color: red">待支付</span>
                    <span v-if="scope.row.state==2" style="color: orangered">待发货</span>
                    <span v-if="scope.row.state==3" style="color: green">已完成</span>
                    <span v-if="scope.row.state==-1" style="color: gray">取消</span>
                </template>
            </el-table-column>
            <el-table-column prop="lastConfirmTime" label="支付完成时间">
            </el-table-column>
            <el-table-column prop="orderSn" label="订单编号">
            </el-table-column>
            <el-table-column prop="paySn" label="支付单号">
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </section>
</template>
<script>

    export default {
        data() {
            return {
                //显示列表加载框
                listLoading: false,
                //领养订单列表
                adoptOrders: [],
                //当前页
                currentPage: 1,
                //每页条数
                pageSize: 10,
                //总条数
                total: 0
            };
        },
        methods: {
            //页码发生改变的时候触发此函数
            handleCurrentChange(val){
                //修改当前页
                this.currentPage = val;
                //再来分页查询
                this.loadAdoptOrders();
            },
            //查询领养订单列表
            loadAdoptOrders(){
                //显示加载框
                this.listLoading = true;
                //前端传递的分页参数(当前页，每页条数)
                let param = {
                    "currentPage": this.currentPage, "pageSize": this.pageSize
                };
                //请求url地址，并且传递参数
                this.$http.patch("/adopt/findAdminAdoptOrder",param).then(res=>{
                    //关闭加载框
                    this.listLoading = false;
                    let {total,list} = res.data;
                    //返回分页列表
                    this.adoptOrders = list;
                    //返回总条数
                    this.total = total;
                })
            }
        },
        mounted() {
            //加载所有的领养订单分页列表
            this.loadAdoptOrders();
        }
    }

</script>